<template>
  <view class="header-box" :style="{paddingTop:statusBarHeight+'px'}">
    <view class="header">
      <view class="title">{{title}}</view>

      <view class="search" @click="goSearch">
        <uni-icons color="#666" type="search" size="24"></uni-icons>
        <text>搜索</text>
      </view>
    </view>
  </view>
</template>

<script setup>
	
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)
  const props = defineProps({
    title: {
      type: String,
      default: "推荐"
    }
  })

  const goSearch = () => {
    uni.navigateTo({
      url: '/pages/search/search'
    })
  }
</script>

<style lang="scss" scoped>
  .header-box {
    height: 250rpx;
    background: linear-gradient(to right, #D4F2E6, #F4E6DD);
    border-radius: 0 0 100rpx 100rpx;

    .header {
      height: 65rpx;
      display: flex;
      padding: 30rpx;

      .title {
        font-size: 50rpx;
        font-weight: bold;
        margin-right: 30rpx;
      }

      .search {
        width: 220rpx;
        height: 100%;
        box-sizing: border-box;
        border: 2px solid #fff;
        border-radius: 65rpx;
        padding: 10rpx;
        display: flex;
        align-items: center;

        text {
          color: #999;
          margin-left: 10rpx;
        }
      }
    }
  }
</style>